<template>
	<div class="box"></div>
	<!-- <Collapse v-model="value" accordion>
		<Panel name="1">
			内容1
			<template #content>测试1</template>
</Panel>
<Panel name="2">
	内容2
	<template #content>测试2</template>
</Panel>
<Panel name="3">
	内容3
	<template #content>测试3</template>
</Panel>
</Collapse> -->
	<Row>
		<Col v-for="(item, index) in form.list">
		<div class="box">{{ item.name }}</div>
		</Col>
	</Row>
	<Row>
		<Button type="default" @click="add">操作1</Button>
		<Button type="default" @click="edit">操作2</Button>
	</Row>
	<Row>
		{{ arr }}
	</Row>
	<Row>
		<Button type="default" @click="add2">操作</Button>
	</Row>
	<Row>
		<Col>
		<Row v-for="(item, index) in obj.list" :key="index" :class="['name_' + item.name]">
			<template v-if="item.type?.includes('c')">
				{{ item.value }}
				<component :is="item.type" :item="item" v-model="item.value"></component>
			</template>
			<template v-else>
				<template v-if="item.name == 'd'">
					{{ item.value }}
					<RadioGroup v-model="item.value">
						<Radio :label="v.value" v-for="(v, index) in item.list">{{ v.label }}</Radio>
					</RadioGroup>
				</template>
				<template v-if="item.name == 'e'">
					{{ item.value }}
					<CheckboxGroup v-model="item.value">
						<Checkbox :label="v.value" v-for="(v, index) in item.list">{{ v.label }}</Checkbox>
					</CheckboxGroup>
				</template>
			</template>
		</Row>
		<Row v-for="(item, index) in obj2.list" :key="index" :class="['name_' + item.name]">
			{{ item.name }} : {{ item.value }} : {{ item.type }}
		</Row>
		</Col>
	</Row>
	<Row>
		<Form :model="form.list" ref="c-form">
			<template v-for="(item, index) in form.list">
				<FormItem label="姓名" :prop="`[${index}].name`"
					:rules="[{ required: true, message: `请输入姓名`, trigger: 'blur' }, { validator: check }]">
					<Input v-model="item.name" placeholder=""></Input>
				</FormItem>
				<FormItem label="年龄" :prop="`[${index}].age`" :rules="{ required: true, message: `请输入年龄`, trigger: 'blur' }">
					<Input v-model="item.age" placeholder=""></Input>
				</FormItem>
			</template>
			<Button type="default" @click="submit">操作</Button>
		</Form>
	</Row>
</template>
<script>
import c1 from './251023.b1.vue'
import c2 from './251023.b2.vue'
import moment from 'moment';
export default {
	components: {
		c1, c2
	},
	data() {
		return {
			value: 1,
			form: {},
			arr: [1, 2, 3, 4, 5, 6],
			obj: {
				list: [{
					name: 'a',
					value: 1, //定义数据
					type: 'c1' //绑定模板
				}, {
					name: 'b',
					value: 1,
					type: 'c1'
				}, {
					name: 'c',
					value: {
						start: moment().toDate(),
						end: moment().add(10, 'd').toDate()
					},
					type: 'c2'
				}, {
					name: 'd',
					value: 1,
					list: [{
						label: '栏目1',
						value: 1
					}, {
						label: '栏目2',
						value: 2
					}, {
						label: '栏目3',
						value: 3
					}],
				}, {
					name: 'e',
					value: [1, 2, 3],
					list: [{
						label: '栏目1',
						value: 1
					}, {
						label: '栏目2',
						value: 2
					}, {
						label: '栏目3',
						value: 3
					}],
				}]
			},
			obj2: {
				list: [{
					name: 'b',
					value: 22,
					type: 'c1'
				}, {
					name: 'c',
					value: 22,
					type: 'c2'
				}, {
					name: 'd',
					value: 21,
					type: 'c3'
				}]
			},
			form: {
				list: [{
					name: '1',
					age: '1',
				}, {
					name: '2',
					age: '2',
				}]
			}
		}
	},
	methods: {
		add2() {
			this.arr[0] = 999;
		},
		edit() {
			console.log(this.form.list);
			if (this.form?.list?.[0].name)
				this.form.list[0].name = 999;
		},
		add() {
			this.form.list = [{
				name: 1,
			}, {
				name: 2
			}]
		},
		check(rules, value, callback) {
			console.log(arguments);
			if (value == '1') {
				setTimeout(() => {
					callback('有错误1');
				}, 1e3);
			} else {
				callback();
			}
		},
		submit() {
			this.$refs['c-form'].validate((valid, errors) => {
				console.log(valid, errors);
			});
			this.$refs['c-form'].validateField('[0].name', (errors) => {
				console.log(errors);
			})
		}
	},
	mounted() {
		let arr = [1, 2, 3, 4, 5, 6];
		let r1 = arr.splice(5, 1);
		let r2 = arr.splice(4, 0, ...r1)
		console.log(arr);

		const a = [1, 2, 3, 4, {
			name: 1,
			age: [1, 2, 3, 4]
		}]

		const age1 = a[1].age?.[0] || '99'
		const age2 = a[4].age?.[0] || '100'
		console.log('age', age1, age2);
	}
}
</script>
<style lang="scss" scoped>
.box {
	width: 100px;
	height: 100px;
	border: 1px solid #000;
}
</style>